import React, { PureComponent } from 'react'
import { Input, Button, List } from 'antd';
import 'antd/dist/antd.css'
import store from '../store/index.js'
import { DELETE_INPUTVALUE, SETITE_MVALUE } from '../store/actionTypes'
import {changeInputcaction} from '../store/actionCreators'
export class Todulist extends PureComponent {
    constructor(props) {
        super(props)
        // console.log(store.getState())
        this.state = store.getState()
        this.changeCalue = this.changeCalue.bind(this)
        this.storeChange = this.storeChange.bind(this)
        store.subscribe(this.storeChange)//创建订阅模式
    }
    render() {
        return (
            <div>
                <div style={{ margin: 20 }}>
                    <Input placeholder={this.state.inputValue}
                        style={{ width: 300, marginRight: 10 }}
                        onChange={this.changeCalue}
                        value={this.state.inputValue} />
                    <Button onClick={this.setvalue} type="primary" >
                        增加11
                   </Button>
                </div>
                <div style={{ margin: 10, width: 300 }}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item, index) => <List.Item onClick={this.itemClick.bind(this, index)} >{item}</List.Item>}
                    />
                </div>
            </div>
        )
    }
    changeCalue(e) {
        const action = changeInputcaction(e.target.value)
        store.dispatch(action)
    }
    storeChange() {
        this.setState(
            store.getState()
        )
    }
    setvalue = () => {
        if (this.state.inputValue ==='') {
            return false
        } else {
            const action = {
                type:SETITE_MVALUE
            }
            store.dispatch(action)
        }
    }
    itemClick(index) {
        const action = {
            type: DELETE_INPUTVALUE,
            index
        }
        store.dispatch(action)
    }
}

export default Todulist
